<head>
    <link rel="stylesheet" href="/assets/v4/css/datepicker.css"/>
    <link rel="stylesheet" href="/assets/v4/css/datetimepicker2.css"/>
    <link rel="stylesheet" href="/assets/v4/css/163css.css"/> 
</head>

<!--专车下单-->
	<div class="box_163css" id="wrapper" >
			<ul class="nav_line2 nav-three lines22 " id="slider" style="display: block; position: relative; transition: none; ">
			    <li><a value="tangzu" class="serviceType errandview nav_click2">立即用车</a></li>
			    <li><a value="tangzuyuyue" class="serviceType errandview">预约用车</a></li>
			    <li><a value="jieji" class="serviceType errandview">接机</a></li>
			    <li><a value="songji" class="serviceType errandview">送机</a></li>
			    <li><a value="jiezhan" class="serviceType errandview">接站</a></li>
			    <li><a value="songzhan" class="serviceType errandview">送站</a></li>
			    <li><a value="rizu" class="serviceType errandview">日租</a></li>
			    <li><a value="banrizu" class="serviceType errandview">半日租</a></li>
			    <li></li>
			</ul>
	</div>
	    <input type="hidden" id="serviceType" ng-model="serviceType" value="tangzu">
	    <input type="hidden" id="serverTime" class="serverTime">
<hr/><br/>
<div>
    <div class="content-top" data-ng-bind-html="tip">

    </div>
    <div class="content_tit">
        <div class="content-letxt">
            <div class="list-block">
                <ul>
                    <!-- Text inputs -->
                    <div id="tab1">
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/icon-dit2.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="您在哪里？"
                                               ng-model="zhuanche.beginAddress"
                                               ng-focus="watchBeginInput()"
                                               ng-blur="stopWatchBeginInput()">
                                    </div>
                                </div>
                                <div class="item-pam" ng-hide="hideBeginTip" ng-click="hidePois()">
                                    <ul ng-repeat="poi in beginPois">
                                        <li ng-click="beginSelect(poi)">{{poi.name}}<span>{{poi.address}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/icon-dit.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="您要去那里？(选填)"
                                               ng-model="zhuanche.endAddress"
                                               ng-focus="watchEndInput()"
                                               ng-blur="stopWatchEndInput()">
                                    </div>
                                </div>
                                <div class="item-pam" ng-hide="hideEndTip" ng-click="hidePois()">
                                    <ul ng-repeat="poi in endPois">
                                        <li ng-click="endSelect(poi)">{{poi.name}}<span>{{poi.address}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>

                        <!-- Select -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/pt-icon-dh.jpg"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="请输入您的联系方式" 
                                               ng-model="zhuanche.phone">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </div>

                    <div style="display:none;" id="tab2">
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/time.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" class="serverTime" placeholder="请选择用车时间"
                                               ng-model="zhuanche.serverTime" readonly="readonly">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/icon-dit2.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="您在哪里？"
                                               ng-model="zhuanche.beginAddress"
                                               ng-focus="watchBeginInput()"
                                               ng-blur="stopWatchBeginInput()">
                                    </div>
                                </div>
                                <div class="item-pam" ng-hide="hideBeginTip" ng-click="hidePois()">
                                    <ul ng-repeat="poi in beginPois">
                                        <li ng-click="beginSelect(poi)">{{poi.name}}<span>{{poi.address}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/icon-dit.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="您要去那里？(选填)"
                                               ng-model="zhuanche.endAddress"
                                               ng-focus="watchEndInput()"
                                               ng-blur="stopWatchEndInput()">
                                    </div>
                                </div>
                                <div class="item-pam" ng-hide="hideEndTip" ng-click="hidePois()">
                                    <ul ng-repeat="poi in endPois">
                                        <li ng-click="endSelect(poi)">{{poi.name}}<span>{{poi.address}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>

                        <!-- Select -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/pt-icon-dh.jpg"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="请输入您的联系方式" 
                                               ng-model="zhuanche.phone">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </div>

                    <div style="display:none;" id="tab3">

                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/time.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" class="serverTime" placeholder="请选择用车时间"
                                               ng-model="zhuanche.serverTime" readonly="readonly">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/fly.png" width="22"
                                                             height="22" style="margin-top: 3px;"/>
                                </div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" id="flightNo" placeholder="请输入航班号" style="ime-mode:disabled"
                                               ng-model="zhuanche.flightNo">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/icon-dit2.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="您在哪里？"
                                               ng-model="zhuanche.beginAddress"
                                               ng-focus="watchBeginInput()"
                                               ng-blur="stopWatchBeginInput()">
                                    </div>
                                </div>
                                <div class="item-pam" ng-hide="hideBeginTip" ng-click="hidePois()">
                                    <ul ng-repeat="poi in beginPois">
                                        <li ng-click="beginSelect(poi)">{{poi.name}}<span>{{poi.address}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/icon-dit.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="您要去那里？(选填)"
                                               ng-model="zhuanche.endAddress"
                                               ng-focus="watchEndInput()"
                                               ng-blur="stopWatchEndInput()">
                                    </div>
                                </div>
                                <div class="item-pam" ng-hide="hideEndTip" ng-click="hidePois()">
                                    <ul ng-repeat="poi in endPois">
                                        <li ng-click="endSelect(poi)">{{poi.name}}<span>{{poi.address}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <!-- Select -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/pt-icon-dh.jpg"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="请输入您的联系方式"  
                                               ng-model="zhuanche.phone">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </div>

                    <div style="display:none;" id="tab4">
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/time.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" class="serverTime" placeholder="请选择用车时间"
                                               ng-model="zhuanche.serverTime" readonly="readonly">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/train.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="请输入班次号" 
                                               ng-model="zhuanche.trainNo">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/icon-dit2.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="您在哪里？"
                                               ng-model="zhuanche.beginAddress"
                                               ng-focus="watchBeginInput()"
                                               ng-blur="stopWatchBeginInput()">
                                    </div>
                                </div>
                                <div class="item-pam" ng-hide="hideBeginTip" ng-click="hidePois()">
                                    <ul ng-repeat="poi in beginPois">
                                        <li ng-click="beginSelect(poi)">{{poi.name}}<span>{{poi.address}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/icon-dit.png"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="您要去那里？(选填)"
                                               ng-model="zhuanche.endAddress"
                                               ng-focus="watchEndInput()"
                                               ng-blur="stopWatchEndInput()">
                                    </div>
                                </div>
                                <div class="item-pam" ng-hide="hideEndTip" ng-click="hidePois()">
                                    <ul ng-repeat="poi in endPois">
                                        <li ng-click="endSelect(poi)">{{poi.name}}<span>{{poi.address}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>

                        <!-- Select -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><img src="/assets/v4/img/pt-icon-dh.jpg"
                                                             width="22" height="22"
                                                             style="margin-top: 3px;"/></div>
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" placeholder="请输入您的联系方式" 
                                               ng-model="zhuanche.phone">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </div>

                    <!--专车-->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><img src="/assets/v4/img/types.png" width="22"
                                                         height="22" style="margin-top: 3px;"/>
                            </div>
                            <div class="item-inner">
                                <div class="item-input">
                                    <a ng_click="types()" id="serlectTypes">选车型</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!--专车-->
                    <!-- yue -->
                    <div class="item-content item-boder">
                        <div class="item-papi">
                            <div class="item-input" data-ng-bind-html="feemsg">
<!--                             <div class="item-input" data-ng-bind-html="feemsg"
                                 ng-click="showFeeDetail()"> -->

                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    <div id="dj-button" class="button-bci"><!--呼叫代驾-->
        <button type="button" id="zhuancheButton" ng-click="submit()">立即预约</button>
        <p>预约即表示您同意<a href="#/agreement">《服务协议》</a></p>
        <!-- <p><a href="#/areazhuan">《计费标准》</a></p> -->
    </div>
</div>
<script type="text/javascript" src="/assets/v4/js/lib/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/assets/v4/js/lib/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="/assets/v4/js/lib/jquery.touchSlider.js"></script>
<script type="text/javascript" src="/assets/v4/js/lib/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="/assets/v4/js/lib/touchslider.js"></script>
<script type="text/javascript">
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt =
                        fmt.replace(RegExp.$1,
                                    (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(
                                            ("" + o[k]).length)));
        return fmt;
    }

    $("#serverTime").val(new Date().Format("yyyy-MM-dd hh:mm"));
    $(".serverTime").datetimepicker({
                                        format: "yyyy-mm-dd HH:ii",
                                        language: 'zh-CN',
                                        startDate: new Date(),
                                        showMeridian: true,
                                        autoclose: true,
                                        todayBtn: true
                                    });
    $(document).on("click", ".serviceType", function () {
        if ($(this).attr("value") == "tangzu") {
            $(".serviceType").removeClass('nav_click2');
            $(this).addClass('nav_click2');
            $("#tab1").fadeIn(200);
            $("#tab2").hide();
            $("#tab3").hide();
            $("#tab4").hide();
            $("#serviceType").val($(this).attr("value"));
        } else if ($(this).attr("value") == "tangzuyuyue") {
            $(".serviceType").removeClass('nav_click2');
            $(this).addClass('nav_click2');
            $("#tab2").fadeIn(200);
            $("#tab1").hide();
            $("#tab3").hide();
            $("#tab4").hide();
            $("#serviceType").val($(this).attr("value"));
        } else if ($(this).attr("value") == "rizu" || $(this).attr("value") == "banrizu") {
            $(".serviceType").removeClass('nav_click2');
            $(this).addClass('nav_click2');
            $("#tab2").fadeIn(200);
            $("#tab1").hide();
            $("#tab3").hide();
            $("#tab4").hide();
            $("#serviceType").val($(this).attr("value"));
        }
        else if ($(this).attr("value") == "jieji" || $(this).attr("value") == "songji") {
            $(".serviceType").removeClass('nav_click2');
            $(this).addClass('nav_click2');
            $("#tab3").fadeIn(200);
            $("#tab1").hide();
            $("#tab2").hide();
            $("#tab4").hide();
            $("#serviceType").val($(this).attr("value"));
        } else if ($(this).attr("value") == "jiezhan" || $(this).attr("value") == "songzhan") {
            $(".serviceType").removeClass('nav_click2');
            $(this).addClass('nav_click2');
            $("#tab4").fadeIn(200);
            $("#tab1").hide();
            $("#tab2").hide();
            $("#tab3").hide();
            $("#serviceType").val($(this).attr("value"));
        }
    });
    
      $(function(){
		n=$('.lines22 li').size();	
		var wh=100*n+"%";
		$('.lines22').width(wh);
		var lt=(100/n/4);
		var lt_li=lt+"%";
		$('.lines22 li').width(lt_li);			
		var y=0;
		var w=n/2;		
		$('.lines22 li').click(function(){
			$(".lines22").swipe();
		})
		$(".lines22").swipe( {					
			swipeLeft:function() {
				if(y <= -lt*w){
				}else{
					y=y-lt;								
					var t=y+"%";									
					$(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'100ms linear'} );	
				}
			},
			swipeRight:function() {
				if(y >= 0.1){
				}else{
					y=y+lt;
					var t=y+"%";
					$(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'100ms linear'} );	
				}
				
			}
		});
	});	  	
    
	
	

</script>
<!--专车下单-->